<template>
  <div :class="`${PREFIX}`">
    <Header />
    <div :class="`${PREFIX}-routerview`" ref="viewRef">
      <router-view :height="height"></router-view>
    </div>
    <Footer />
  </div>
</template>

<script setup>
const PREFIX = 'app'
import { ref, watch, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import Header from './components/Header1.vue'
import Footer from './components/Footer1.vue';
const viewRef = ref(null)
const height = ref(0)
const route = useRoute()
watch(route, () => {
  nextTick(() => {
    height.value = viewRef.value.getBoundingClientRect().height
  })
})
</script>
<style lang="less">
.app {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  &-routerview {
    width: 100%;
    flex: 1;
    overflow-y: scroll;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
